import { useEffect, useState } from 'react';

// 函数组件
export const App2 = () => {
  const [count2, setCount2] = useState<number>(0);
  // 引入副作用（模仿声明周期）
  // UI 渲染完毕后，给window添加一个事件监听函数
  useEffect(() => {
    // 每次UI渲染完毕后执行 useEffect
    // 给window添加一个事件监听函数
    console.log('App2添加');
    const resize = () => console.log('窗口大小变化了');
    window.addEventListener('resize', resize);
    // window.onresize = resize;
    // 清理函数-组件卸载的时候
    return () => {
      console.log('App2清除');
      window.removeEventListener('resize', resize);
    };
  });

  return (
    <div>
      <h3>App2</h3>
      <h4>{count2}</h4>
      <button onClick={() => setCount2(count2 + 1)}>Count2+1</button>
    </div>
  );
};
